import React from 'react';
import { Form, Row, Col, Select, Input, Button, Space } from 'antd';
import { STATIC } from '@/services/config';

const ConditionNameSelect = (props) => {
  const list = [
    { name: '正题名', value: 'title' },
    { name: 'ISBN', value: 'isbn' },
    { name: '责任者', value: 'primaryAuthor' },
    { name: '出版社', value: 'publishingHouseCode' }
  ]
  return (
    <Select
      defaultValue='title'
      placeholder='请选择查询条件'
      {...props}>
      {list.map((item) => (
        <Select.Option value={item.value} key={item.value}>
          {item.name}
        </Select.Option>
      ))}
    </Select>
  )
}

class Search extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      condition: 'title'
    }
    this.formRef = React.createRef()
  }

  /* 查询条件选择 */
  onConditionChange = (condition) => {
    this.setState({condition})
  }

  /* 重置数据 */
  onReset = () => {
    const {reset} = this.props;
    reset ? reset() : null;
    this.formRef.current.resetFields();
  }

  /* 表单提交 */
  onFinish = (e) => {
    const {search} = this.props;
    const {conditionVal, status} = e;
    const condition = this.state.condition;
    const params = {};
    status ? params.status = status : null;
    conditionVal ? params[condition] = conditionVal : null;
    search ? search(params) : null;
  }

  render() {

    const {onFinish, onReset, onConditionChange, formRef} = this;
    return (
      <Form
        ref={formRef}
        name="advanced_search"
        className="ant-advanced-search-form"
        onFinish={onFinish}>
        <Row gutter={24}>
          <Col span={6}>
            <Form.Item name='conditionVal'>
              <Input addonBefore={<ConditionNameSelect onChange={onConditionChange} />} allowClear style={{ width: '100%' }} placeholder='请输入查询内容' />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label="状态" name='status'>
              <Select
                allowClear
                placeholder='请选择状态'>
                {STATIC.budgetCheckStatus.map((item) => (
                  <Select.Option value={item.value} key={item.value}>
                    {item.name}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item>
              <Space>
                <Button type="primary" htmlType="submit">查询</Button>
                <Button onClick={onReset}>重置</Button>
              </Space>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    )
  }
}

export default Search